<template>
	<view style="padding-bottom: 130rpx;">
		<uni-section title="违约信息" type="line" v-if="liquidatedDamages">
			<view class="formInfo">
				<text style="color: #666;font-size: 28rpx;">
					1.提前联系门店，如需提前还车，请在还车前2小时联系门店，在门店营业时间范围内办理还车手续，如未提前联系，可能导致无法及时还车如在夜间时间段办理还车手续，请在下单前后咨询门店，夜间情况特殊可能无人办理.
					</br>
					2.{{liquidatedDamages.ruleText}}
				</text>
			</view>
		</uni-section>


		<uni-section title="剩余租金明细" type="line">
			<view class="formInfo">
				<view v-for="(item, index) in breachInfo.rentItems" :key="index" style="margin: 20rpx; 0">
					<view class="flex-row-center-sb" style="margin-bottom: 20rpx;">
						<text style="font-size: 28rpx;color: #666;">{{item.chargeProjectName}}</text>
						<block v-if="index == 0"><text style="font-size: 26rpx;color: #2879FF;"
								@click.stop="showRentDetail = !showRentDetail">明细</text></block>
					</view>
					<uni-table ref="table" :loading="loading" border stripe>
						<uni-tr>
							<uni-th width="70" align="center"><text style="color: #2879FF;">单价</text> </uni-th>
							<uni-th width="70" align="center"><text style="color: #2879FF;">数目</text> </uni-th>
							<uni-th width="70" align="center"><text style="color: #2879FF;">费用</text></uni-th>
							<uni-th width="90" align="center"><text style="color: #2879FF;">已使用费用</text></uni-th>
						</uni-tr>
						<uni-tr>
							
							<uni-td align="center">{{item.unitPrice}}{{item.chargeItemsType|chargeItemsType}}</uni-td>
							<uni-td align="center">{{item.number}}</uni-td>
							<uni-td align="center">{{item.chargeMoney}}</uni-td>
							<uni-td align="center">{{item.usedMoney}}</uni-td>
						</uni-tr>
					</uni-table>

				</view>
				<view class="textItem">
					<text>已使用费用总计</text>
					<text style="color: #333;">{{breachInfo.usedRent||0}}元</text>
				</view>
				<view class="textItem">
					<text>已付租金总计</text>
					<text style="color: #333;">{{breachInfo.paidRent||0}}元</text>
				</view>
				<view class="textItem">
					<text>剩余租金</text>
					<text style="color: #333;">{{liquidatedDamages.rent||0}}元</text>
				</view>
				<view style="margin-top: 24rpx; font-size:24rpx; color:#999">注：若已使用费用超出已付租金，建议您收齐</view>
			</view>
		</uni-section>

		<uni-section title="退款信息" type="line" v-if="liquidatedDamages">
			<view class="formInfo">
				<uni-forms ref="form">
					<uni-forms-item label="扣除金额">
						<view>
<!--              张志家让改的-->
<!--							<u&#45;&#45;input v-model="liquidatedDamages.damages" :disabled="liquidatedDamages.rent<=0?true:false"  placeholder="自动带出/可修改金额"></u&#45;&#45;input>-->
              <u--input v-model="liquidatedDamages.damages"  placeholder="自动带出/可修改金额"></u--input>

						</view>
					</uni-forms-item>

					<uni-forms-item label="应退金额">
						<view>
							<u--input v-model="refundAmount" placeholder="自动计算不可修改" disabled></u--input>
						</view>
					</uni-forms-item>


				</uni-forms>
			</view>
		</uni-section>
		<view class="bottomView flex-row-center-sb">
			<view class="btn" style="border: 1rpx solid #1673ff;color: #1673ff;background-color: #fff;"
				@click="lastStep">上一步</view>
			<view class="btn" @click="confimEarlyReturn">确认还车</view>
		</view>

		<u-popup :show="showRentDetail" mode="center" @close="showRentDetail = false" closeable round="12">
			<view class="flex-colum-center" style="padding: 40rpx 24rpx">
				<view style="margin-bottom: 30rpx;">租赁费明细</view>
				<scroll-view scroll-y="true">
					<view style="max-height: 800rpx;">
						<view class="flex-row-center-sb payCostItem"
							v-for="(item, index) in liquidatedDamages.orderPriceCalendars" :key="index">
							<text>{{item.sameDay}}</text>
							<text>{{item.price}}元</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import * as api from '@/api/order-api.js';
	export default {
		data() {
			return {
				showRentDetail: false,
				form: {},
				liquidatedDamages: {},
				breachInfo: {}
			}
		},
		computed: {
			refundAmount() {
				var amount = 0;
				if (!uni.$u.test.isEmpty(this.liquidatedDamages)) {
					amount = this.liquidatedDamages.rent - this.liquidatedDamages.damages;
				}
        if (amount <= 0) {
          amount = 0;
        }
				return amount;
			}
		},
		onLoad(op) {
			this.form = JSON.parse(decodeURIComponent(op.form));
			console.log(this.form);
			this.getEarlyReturnDetail();
		},
		methods: {
			//获取提前还车扣款明细
			getEarlyReturnDetail() {
				api.earlyReturnDetail({
					orderNo: this.form.orderNo,
					takeAlsoTime: this.form.takeAlsoTime,
					type: 2
				}).then(res => {
					this.breachInfo = res.data;
					this.liquidatedDamages = res.data.liquidatedDamages;
				})
			},
			// 上一步
			lastStep() {
				uni.navigateBack()
			},
			// 确认提前还车
			confimEarlyReturn() {
				uni.showLoading({
					title: '提交中...',
					mask: true
				});
				let param = {
					...this.form,
					cost: this.customCostList,
					ruleText: this.liquidatedDamages.ruleText,
					deductionRent: this.liquidatedDamages.damages,
					rentToBeRefunded: this.refundAmount,
					usedRent: this.breachInfo.usedRent,
					rentItems : this.breachInfo.rentItems
				};
				api.earlyReturn(param).then(data => {
					uni.$emit('refreshOrder');
					this.$u.toast('提交成功');
					uni.navigateBack({
						animationDuration: 300,
						delta: 2
					});
				}).finally(() => {
					uni.hideLoading();
				});


			}

		}
	}
</script>

<style lang="scss" scoped>
	.formInfo {
		margin: 20rpx;
		padding: 20rpx 30rpx;
		background: #ffffff;
		border-radius: 18rpx;
		background: #FFFFFF;
		box-shadow: 0px 4rpx 16rpx 0px rgba(1, 10, 18, 0.1);
		border-radius: 16rpx;
	}

	.bottomView {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 120rpx;
		padding: 0 44rpx;

		.btn {
			height: 88rpx;
			width: 312rpx;
			line-height: 88rpx;
			text-align: center;
			border-radius: 44rpx;
			background-color: #1673FF;
			font-size: 32rpx;
			color: #fff;
		}
	}

	.textItem {
		padding: 12rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		color: #666;
	}
	.payCostItem {
		height: 80rpx;
		width: 600rpx;
		border-bottom: 1rpx solid #ededed;
		font-size: 28rpx;
		color: #333;
	}
</style>
